<template>
  <div class="home">
    <!-- 欢迎卡片 -->
    <el-row :gutter="70">
      <el-col :span="8">
        <el-card class="grid-content" style="height: 154px">
          <div class="avatar">
            <el-avatar :size="70" :src="icon" v-if="icon !== undefined"></el-avatar>
            <el-avatar :size="70" v-else>{{name}}</el-avatar>
          </div>
          <div class="welcome-content">
            <div>欢迎您， {{name}}</div>
            <div class="little">我管理的宿舍楼：{{statistics.building}}</div>
            <div class="little">宿舍总数： {{statistics.roomNum}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="grid-content" style="height: 154px">
          <!-- 可以添加其他内容 -->
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="grid-content" style="height: 154px">
          <img src="../assets/images/校徽.png" style="width: 360px">
        </el-card>
      </el-col>
    </el-row>

    <!-- 轮播图 -->
    <el-row>
      <el-col :span="24">
        <el-card class="grid-content">
          <el-carousel :interval="4000" type="card">
            <el-carousel-item v-for="url in urls" :key="url">
              <el-image :src="url" fit="cover"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入相关组件和工具函数
import store from "../store";
import {get} from "@/api/system/home";

export default {
  name: 'Home',
  data() {
    return {
      statistics: {
        building: undefined,
        roomNum: undefined,
        totalStudent: undefined,
        livingStudent: undefined,
        leaveStudent: undefined,
        unprocessedRepair: undefined,
      },
      urls: [
        require('../assets/images/1.png'),
        require('../assets/images/2.png'),
        require('../assets/images/3.png'),
        require('../assets/images/4.png'),
        require('../assets/images/5.png')
      ]
    }
  },
  computed: {
    activeMenu() {
      const route = this.$route
      const {path} = route
      return path
    },
    name() {
      return store.state.userName
    },
    icon() {
      return store.state.userIcon
    }
  },
  methods: {
    // 获取数据
    async get() {
      const {data} = await get()
      this.statistics = data
    }
  },
  created() {
    this.get()
  }
}
</script>

<style scoped>
/* 样式省略，此处为组件样式定义 */
</style>
